<script setup>

import {ref} from "vue";
import axios from "axios";
import {ElLoading, ElMessage} from "element-plus";
//系列下拉框选项
const isRealNamedOptions = [
  {
    value: '0',
    label: '- 全部 -',
  },
  {
    value: '1',
    label: '已实名',
  },
  {
    value: '2',
    label: '未实名',
  }
]
const headers = {
  Authorization: localStorage.getItem("auth")
}
const userSeries = ref("0");
const userId = ref("");
const userMobile = ref("");
const userName = ref("");
const userIdcard = ref("");
//定义表格的引用
const userTableRef = ref();
const dialogShowDetailsVisible = ref(false);
const showDetail = () => {
  dialogShowDetailsVisible.value = true;
  axios.get("/api/user/selectByUserID?userId="+currentUser.value.id, {headers}).then(response => {
    console.log("获取成功");
    userGoods.value = response.data.value;  //将从接口获取到的数据，赋值给goodsPage对象
  }).catch(error => {
    console.log("获取失败", error.response);
  })
}
//用户相关数据加载中
const userPageLoading = ref(true);
//当前页码
const userPageIndex = ref(1);

//相关数据
const userPage = ref({
  records:[]
});
const getUserPage = () => {
  userPageLoading.value = true;
  axios.post("/api/user", {
    id: userId.value,
    idcard: userIdcard.value,
    mobile: userMobile.value,
    pageIndex: userPageIndex.value,
    pageSize: 8,
    realName: userName.value,
    realNameInfo:userSeries.value
  }, {headers}).then(response => {
    console.log("获取成功");
    userPage.value = response.data.value;  //将从接口获取到的数据，赋值给goodsPage对象
    userPageLoading.value = false;
  }).catch(error => {
    console.log("获取失败", error.response);
    userPageLoading.value = false;
  })
}
getUserPage();

const userGoods = ref();




//选择的当前用户
const currentUser = ref({});

//表示单击行
const handleRowClick = row => {
  userTableRef.value.data.forEach(r => {
    userTableRef.value.toggleRowSelection(r, r.id == row.id);
  })
  currentUser.value = row;
}
//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  if (multipleSelection.value.length == 1) {
    currentUser.value = multipleSelection.value[0];
  } else {
    currentUser.value = {};
  }
}

const switchChangeHandler = (val,row,loading) => {
  row[loading] = true;
  axios.post("/api/user/changeState",
      {id:row.id,
        available:row.available},{headers}).then(response => {
    console.log("保存成功");
    row[loading] = false;
  }).catch(error => {
    console.log("保存失败", error.response);
    ElMessage({
      message: error.response.data.message,
      type: 'warning',
    })
  })
}

const switchChangeSubscribeHandler = (val,row,loading) => {
  row[loading] = true;
  axios.post("/api/user/changeSubscribe",
      {id:row.id,
        subscribeToTheSalesCalendar:row.subscribeToTheSalesCalendar},{headers}).then(response => {
    console.log("保存成功");
    row[loading] = false;
  }).catch(error => {
    console.log("保存失败", error.response);
    ElMessage({
      message: error.response.data.message,
      type: 'warning',
    })
  })
}
const switchChangeDisplayMyGoodsHandler = (val,row,loading) => {
  row[loading] = true;
  axios.post("/api/user/changeDisplayMyGoods",
      {id:row.id,
        displayMyGoods:row.displayMyGoods},{headers}).then(response => {
    console.log("保存成功");
    row[loading] = false;
  }).catch(error => {
    console.log("保存失败", error.response);
    ElMessage({
      message: error.response.data.message,
      type: 'warning',
    })
  })
}
const switchChangeDisplayMySellGoodsHandler = (val,row,loading) => {
  row[loading] = true;
  axios.post("/api/user/changeDisplayMySellGoods",
      {id:row.id,
        displayMySellGoods:row.displayMySellGoods},{headers}).then(response => {
    console.log("保存成功");
    row[loading] = false;
  }).catch(error => {
    console.log("保存失败", error.response);
    ElMessage({
      message: error.response.data.message,
      type: 'warning',
    })
  })
}
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户中心</el-breadcrumb-item>
    <el-breadcrumb-item>用户信息</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
        <el-input v-model="userId" placeholder="用户id" style="width:80px" />&nbsp;&nbsp;
        <el-input v-model="userMobile" placeholder="用户电话" style="width:120px" />&nbsp;&nbsp;
        <el-input v-model="userName" placeholder="用户姓名" style="width:90px" />&nbsp;&nbsp;
        <el-input v-model="userIdcard" placeholder="用户身份证号" style="width:180px" />&nbsp;&nbsp;
        实名情况:
        <el-select v-model="userSeries" placeholder="请选择" style="width:140px">
          <el-option
              v-for="item in isRealNamedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>&nbsp;&nbsp;
        <el-button type="primary" @click="getUserPage">搜索</el-button>
      </div>
      <el-button type="default" @click="showDetail" :disabled="multipleSelection.length != 1">查看详细信息</el-button>
    </div>
    <div>
      <template v-if="userPage != null">
        <el-table :data="userPage.records"
                  v-loading="userPageLoading"
                  row-key="id"
                  ref="userTableRef"
                  @current-change="handleRowClick"
                  @selection-change="handleSelectionChange"
                  stripe
                  highlight-current-row
                  empty-text="暂无数据"
                  style="width: 100%">
          <el-table-column type="selection" />
          <el-table-column prop="id" label="用户ID" width="80px"/>
          <el-table-column prop="mobile" label="手机号"/>
          <el-table-column prop="realName" label="真实姓名" width="100px"/>
          <el-table-column prop="idcard" label="身份证号" width="170px"/>
          <el-table-column prop="nickname" label="昵称"/>
          <el-table-column label="是否冻结">
            <template #default="scope" >
              <el-switch v-model="scope.row.available"
                         :loading="scope.row.availableLoading" @change="switchChangeHandler(val,scope.row,'availableLoading')"
                         active-text="可用"
                         inactive-text="冻结"/>
             </template>
          </el-table-column>
          <el-table-column label="是否订阅"  >
            <template #default="scope" >
              <el-switch v-model="scope.row.subscribeToTheSalesCalendar"
                         :loading="scope.row.subscribeLoading" @change="switchChangeSubscribeHandler(val,scope.row,'subscribeLoading')" />
            </template>
          </el-table-column>
            <el-table-column label="是否展示我的藏品"  >
              <template #default="scope" >
                <el-switch v-model="scope.row.displayMyGoods"
                           :loading="scope.row.displayMyGoodsLoading" @change="switchChangeDisplayMyGoodsHandler(val,scope.row,'displayMyGoodsLoading')" />
              </template>
            </el-table-column>

          <el-table-column label="是否展示我出售的藏品"  >
            <template #default="scope" >
              <el-switch v-model="scope.row.displayMySellGoods"
                         :loading="scope.row.displayMySellGoodsLoading" @change="switchChangeDisplayMySellGoodsHandler(val,scope.row,'displayMySellGoodsLoading')" />
            </template>
          </el-table-column>

        </el-table>
        <el-pagination background layout="prev, pager, next"
                       default-page-size="9"
                       :total="userPage.total"
                       v-model:current-page="userPageIndex"
                       @current-change="getUserPage"/>
      </template>
    </div>
  </div>
  <el-dialog
      v-model="dialogShowDetailsVisible"
      title="用户详情"

      width="800" align-center>
    <tr>
      <td>姓名:</td>
      <td v-text="currentUser.realName" >
      </td>
      <td class="imgTitle">照片:
      <div class='imgBox'>
        <img :src="'/upload/photo/'+ currentUser.id + '.jpg'" v-if="currentUser.realName != null && currentUser.realName != ''"/>
        <div v-else>暂未实名,无照片</div>
      </div>
      </td>
    </tr>
    <tr>
      <td>身份证号:</td>
      <td v-text="currentUser.idcard">
      </td>

    </tr>
    <tr>
      <td>区块链地址:</td>
      <td v-text="currentUser.blockchainAddress">
      </td>
    </tr>
    <tr>
    <td>手机号:</td>
    <td v-text="currentUser.mobile" >

    </td>
    </tr>
    <tr>
      <td>用户资产:</td>
      <td>
        <el-table :data="userGoods"
                  row-key="id"
                  v-loading="userPageLoading"
                  ref="userTableRef"
                  border
                  empty-text="暂无数据"
                  style="width: 100%">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="goodsId" label="商品ID"/>
          <el-table-column prop="registrationId" label="认购挂单ID"/>
          <el-table-column prop="nickname" label="昵称"/>
          <el-table-column prop="count" label="数量"/>
        </el-table>
      </td>
    </tr>
  </el-dialog>
</template>

<style scoped>
.imgTitle{
  position: relative;
}
.imgBox{
  position: absolute;
  left: 40px;
  top: 10px;
  width: 100px;
  height: 130px;
}
.imgBox>img{
  width: 100%;
  height: 100%;
}
</style>